<template>
  <view class="container" :class="responsiveClass" :style="getContainerStyle('lg')">
    <!-- 侧边面板 -->
    <view class="sidebar" :class="{ 'sidebar-open': showSidebar }">
      <view class="sidebar-header">
        <view class="sidebar-logo">
          <text class="sidebar-logo-icon">⚡</text>
          <text class="sidebar-logo-text">QuickMind</text>
        </view>
        <button class="sidebar-close" @click="toggleSidebar">✕</button>
      </view>
      
      <view class="sidebar-content">
        <button class="new-chat-btn" @click="startNewChat">
          <text class="new-chat-icon">+</text>
          <text class="new-chat-text">新建对话</text>
          <text class="new-chat-shortcut">Ctrl + X</text>
        </button>
        
        <view class="sidebar-menu">
          <view class="menu-item" @click="goToHistory">
            <text class="menu-icon">🕒</text>
            <text class="menu-text">历史对话</text>
          </view>
          
          <!-- 历史对话列表 -->
          <view class="history-list">
            <!-- 调试信息 -->
            <view class="debug-info" style="font-size: 12px; color: #999; padding: 8px;">
              <text>调试: isLoadingHistory={{ isLoadingHistory }}, historyChats.length={{ historyChats.length }}</text>
            </view>
            
            <!-- 加载状态 -->
            <view v-if="isLoadingHistory" class="history-loading">
              <view class="loading-spinner"></view>
              <text class="loading-text">加载中...</text>
            </view>
            
            <!-- 空状态 -->
            <view v-else-if="historyChats.length === 0" class="history-empty">
              <text class="empty-text">暂无历史对话</text>
            </view>
            
            <!-- 历史对话列表 -->
            <view v-else class="history-item" @click="openHistoryChat(item)" v-for="(item, index) in historyChats" :key="index">
              <text class="history-icon">💬</text>
              <view class="history-content">
                <text class="history-title">{{ item.title }}</text>
                <text class="history-time">{{ item.time }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部个人信息 -->
      <view class="sidebar-footer">
        <view class="menu-item" @click="goToProfile">
          <text class="menu-icon">👤</text>
          <text class="menu-text">个人信息</text>
        </view>
      </view>
    </view>
    
    <!-- 遮罩层 -->
    <view class="overlay" :class="{ 'overlay-show': showSidebar }" @click="toggleSidebar"></view>

    <!-- H5/APP模式：顶部导航栏 -->
    <view class="navbar" v-if="showNavbar">
      <view class="navbar-left">
        <view class="logo" @click="toggleSidebar">🤖</view>
      </view>
      <view class="navbar-center">
        <text class="navbar-title">QuickMind</text>
      </view>
      <view class="navbar-right">
        <button class="login-btn" @click="goToLogin" v-if="!token">登录</button>
      </view>
    </view>

    <!-- 小程序模式：顶部状态栏 -->
    <view v-if="!showNavbar" class="mp-header">
      <view class="mp-status-bar"></view>
      <view class="mp-nav">
        <text class="mp-menu" @click="toggleSidebar">☰</text>
        <text class="mp-title">QuickMind</text>
        <text class="mp-more" @click="showMore">⋯</text>
      </view>
    </view>

    <!-- 主标题区域 -->
    <view class="hero-section" :class="{ 'hero-section-no-navbar': !showNavbar }">
      <view class="main-title">
        <text class="title-text">QuickMind</text>
        <text class="title-subtitle">智能问答平台</text>
      </view>
      
      <!-- H5/APP模式：输入框在上，推荐问题在下 -->
      <template v-if="showNavbar">
        <!-- 输入框区域 -->
        <view class="input-area">
          <textarea 
            class="question-input" 
            placeholder="尽管问..." 
            v-model="questionText"
            @input="handleInput"
          ></textarea>
          
          <view class="input-actions">
            <view class="action-left">
              <button class="settings-btn" @click="toggleSettings">⚙</button>
            </view>
            
            <view class="action-right">
              <picker mode="selector" :range="modelOptions.map(m=>m.label)" :value="selectedModelIndex" @change="onModelChange">
                <view class="model-selector">
                  <text class="model-text">{{ selectedModelLabel }}</text>
                  <text class="model-arrow">▼</text>
                </view>
              </picker>
              <button class="deep-thinking-toggle" :class="{ active: isDeepMode }" @click="toggleDeepMode">
                <text class="toggle-text">{{ isDeepMode ? '深度思考' : '普通模式' }}</text>
              </button>
          
              <button class="go-to-questions-btn" @click="goToQuestions">↑</button>
            </view>
          </view>
        </view>
      </template>
    </view>

    <!-- 推荐问题区域 -->
    <view class="suggestions" :class="{ 'suggestions-mp': !showNavbar }">
      <view class="suggestion-title">推荐问题</view>
      <view class="suggestion-list">
        <view 
          class="suggestion-item" 
          v-for="(item, index) in suggestions" 
          :key="index"
          @click="selectSuggestion(item.text)"
        >
          <text class="suggestion-icon">{{ item.icon }}</text>
          <text class="suggestion-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 小程序模式：底部输入区域 -->
    <view v-if="!showNavbar" class="input-bottom-mp">
      <textarea 
        class="question-input-bottom" 
        placeholder="尽管问..." 
        v-model="questionText"
        @input="handleInput"
      ></textarea>
      
      <view class="input-actions-bottom">
        <view class="action-left">
          <button class="settings-btn" @click="toggleSettings">⚙</button>
        </view>
        
        <view class="action-right">
          <picker mode="selector" :range="modelOptions.map(m=>m.label)" :value="selectedModelIndex" @change="onModelChange">
            <view class="model-selector">
              <text class="model-text">{{ selectedModelLabel }}</text>
              <text class="model-arrow">▼</text>
            </view>
          </picker>
          <button class="deep-thinking-toggle" :class="{ active: isDeepMode }" @click="toggleDeepMode">
            <text class="toggle-text">{{ isDeepMode ? '深度思考' : '普通模式' }}</text>
          </button>
          <button class="go-to-questions-btn" @click="goToQuestions">↑</button>
        </view>
      </view>
    </view>

    <!-- 底部备案信息 -->
    <view class="footer" v-if="showNavbar">
      <view class="footer-text">内容由AI生成，请仔细甄别</view>
      <view class="footer-text">© 2025 RAGKmin有限公司</view>
      <view class="footer-text">岩备1561418946号-04　岩L2-20250804</view>
      <view class="footer-text">龙公网备案51981748945618号</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { getUserConversations } from '@/api/qa.js'

const questionText = ref('')
const isDeepMode = ref(false)
let token=ref(null)
const modelIndex = ref(0)
const models = ['GPT-4', 'Claude', 'Gemini']
const showSidebar = ref(false)

// 根据平台控制导航栏显示
const showNavbar = computed(() => {
  // #ifdef H5 || APP-PLUS
  return true // H5和APP显示导航栏
  // #endif
  // #ifdef MP-WEIXIN
  return false // 微信小程序隐藏导航栏
  // #endif
  // #ifndef H5 || APP-PLUS || MP-WEIXIN
  return false // 其他平台默认隐藏
  // #endif
})

const suggestions = ref([
  { icon: '🔥', text: '什么？！码界泰斗陈凯杰出山了？？' },
  { icon: '😀', text: '欢迎使用QuickMind' },
  { icon: '👍', text: '龙王重生归来之我叫蔡玮铭' },
  { icon: '❤️', text: 'Oi 老登去把我的鬼火停进车库' }
])

// 历史对话数据
const historyChats = ref([])
const isLoadingHistory = ref(false)

// 切换侧边栏
const toggleSidebar = () => {
  showSidebar.value = !showSidebar.value
  console.log('侧边栏状态:', showSidebar.value)
  // 当侧边栏打开时，加载历史对话
  if (showSidebar.value) {
    console.log('侧边栏打开，开始加载历史对话')
    loadHistoryChats()
  }
}

// 新建对话
const startNewChat = () => {
  showSidebar.value = false
  // 跳转到问答页面开始新对话
  uni.navigateTo({
    url: '/pages/Questions/questions'
  })
}

// 跳转到个人信息页面
const goToProfile = () => {
  showSidebar.value = false
  uni.navigateTo({
    url: '/pages/profile/profile'
  })
}

// 跳转到历史对话页面
const goToHistory = () => {
  showSidebar.value = false
  uni.navigateTo({
    url: '/pages/history/history'
  })
}

// 加载历史对话
const loadHistoryChats = async () => {
  try {
    isLoadingHistory.value = true
    console.log('开始加载历史对话...')
    
    // 先尝试使用模拟数据，确保渲染正常
    const mockData = [
      {
        id: 1,
        title: '关于Vue3组件开发的讨论',
        time: '2小时前',
        lastMessage: 'Vue3的Composition API确实比Options API更灵活...'
      },
      {
        id: 2,
        title: 'UniApp跨平台开发技巧',
        time: '昨天',
        lastMessage: '在UniApp中处理不同平台的差异时...'
      },
      {
        id: 3,
        title: 'AI助手功能优化建议',
        time: '3天前',
        lastMessage: '可以考虑添加语音输入功能...'
      },
      {
        id: 4,
        title: '前端性能优化实践',
        time: '4天前',
        lastMessage: '使用懒加载和代码分割可以显著提升性能...'
      },
      {
        id: 5,
        title: '移动端适配方案',
        time: '5天前',
        lastMessage: '响应式设计和媒体查询是移动端适配的关键...'
      }
    ]
    
    // 先设置模拟数据，确保渲染正常
    historyChats.value = mockData
    console.log('设置模拟数据:', historyChats.value)
    
    // 然后尝试调用真实API
    try {
      const response = await getUserConversations({
        page: 1,
        pageSize: 5
      })
      
      console.log('历史对话API响应:', response)
      
      if (response && response.data) {
        const conversations = response.data.conversations || response.data || []
        if (conversations.length > 0) {
          const mappedConversations = conversations.map((conv, index) => ({
            id: conv.id || conv.sessionId || index + 1,
            title: conv.title || conv.question || `对话 ${index + 1}`,
            time: formatTime(conv.createdAt || conv.timestamp || Date.now()),
            lastMessage: conv.lastMessage || conv.answer || '暂无内容'
          }))
          // 限制显示5条
          historyChats.value = mappedConversations.slice(0, 5)
          console.log('处理后的真实历史对话:', historyChats.value)
        } else {
          console.log('API返回空数据，保持模拟数据')
        }
      } else {
        console.log('API响应格式异常，保持模拟数据')
      }
    } catch (apiError) {
      console.error('API调用失败，保持模拟数据:', apiError)
      // API失败时保持模拟数据，不显示错误提示
    }
  } catch (error) {
    console.error('加载历史对话失败:', error)
    // 即使出错也设置一些模拟数据
    historyChats.value = [
      {
        id: 1,
        title: '示例对话',
        time: '刚刚',
        lastMessage: '这是一个示例对话...'
      }
    ]
  } finally {
    isLoadingHistory.value = false
  }
}

// 格式化时间
const formatTime = (timestamp) => {
  const now = new Date()
  const date = new Date(timestamp)
  const diff = now - date
  
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (minutes < 60) {
    return `${minutes}分钟前`
  } else if (hours < 24) {
    return `${hours}小时前`
  } else if (days < 7) {
    return `${days}天前`
  } else {
    return date.toLocaleDateString()
  }
}

// 打开历史对话
const openHistoryChat = (chat) => {
  showSidebar.value = false
  console.log('打开历史对话:', chat.title)
  // 跳转到问答页面并传递对话ID
  uni.navigateTo({
    url: `/pages/Questions/questions?chatId=${chat.id}&title=${encodeURIComponent(chat.title)}`,
    success: () => {
      console.log('跳转到历史对话成功')
    },
    fail: (err) => {
      console.error('跳转到历史对话失败:', err)
      uni.showToast({
        title: '打开对话失败',
        icon: 'none'
      })
    }
  })
}

// 显示更多功能
const showMore = () => {
  uni.showToast({
    title: '更多功能开发中',
    icon: 'none'
  })
}

//获取token
onMounted(()=>{
  try {
    const tokenData = uni.getStorageSync("token")
    if (tokenData) {
      // 检查是否是JSON格式
      if (typeof tokenData === 'string' && tokenData.startsWith('{')) {
        // 如果是JSON格式，解析它
        const parsedData = JSON.parse(tokenData)
        token.value = parsedData.accessToken || parsedData
      } else {
        // 如果不是JSON格式，直接使用
        token.value = tokenData
      }
    }
  } catch (error) {
    console.error('获取token失败:', error)
    // 如果解析失败，尝试直接使用原始值
    try {
      const tokenData = uni.getStorageSync("token")
      if (tokenData) {
        token.value = tokenData
      }
    } catch (e) {
      console.error('备用token获取也失败:', e)
    }
  }
})

// 下载APP功能已移除

// 跳转到登录页面
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/Login/login'
  })
}

// 切换设置
const toggleSettings = () => {
  uni.showToast({
    title: '设置功能开发中',
    icon: 'none'
  })
}



// 处理输入
const handleInput = () => {
  // 可以在这里添加输入处理逻辑
}

// 已移除附件功能按钮

// 跳转到问答页
const goToQuestions = () => {
  // 传递选中的模型信息
  const selectedModel = modelOptions.value[selectedModelIndex.value]
  const content = (questionText.value || '').trim()
  // 若有输入内容，则一并带上 question 参数，进入问答页后自动问答
  let url = `/pages/Questions/questions?model=${encodeURIComponent(selectedModel.label)}&modelIndex=${selectedModelIndex.value}`
  if (content) {
    url = `/pages/Questions/questions?question=${encodeURIComponent(content)}&model=${encodeURIComponent(selectedModel.label)}&modelIndex=${selectedModelIndex.value}`
  }
  uni.navigateTo({ url })
}

// 切换深度思考模式
const toggleDeepMode = () => {
  isDeepMode.value = !isDeepMode.value
  console.log('深度思考模式:', isDeepMode.value ? '开启' : '关闭')
  // 这里可以添加深度思考模式的具体逻辑
}

// 模型选择器选项
const modelOptions = ref([
  { value: 0, label: 'DeepSeek' },
  { value: 1, label: '星火V2' }
])

// 当前选中的模型索引
const selectedModelIndex = ref(0)

// 当前选中的模型标签
const selectedModelLabel = computed(() => {
  return modelOptions.value[selectedModelIndex.value]?.label || 'DeepSeek'
})

// 模型选择器变化时触发
const onModelChange = (e) => {
  selectedModelIndex.value = e.detail.value
  console.log('模型已切换到:', selectedModelLabel.value)
}

// 发送问题
const sendQuestion = () => {
  const question = questionText.value.trim()
  console.log('首页准备跳转，问题:', question)
  
  if (!question) {
    uni.showToast({
      title: '请输入问题',
      icon: 'none'
    })
    return
  }
  
  // 传递选中的模型信息
  const selectedModel = modelOptions.value[selectedModelIndex.value]
  const url = `/pages/Questions/questions?question=${encodeURIComponent(question)}&model=${encodeURIComponent(selectedModel.label)}&modelIndex=${selectedModelIndex.value}`
  console.log('跳转URL:', url)
  
  // 跳转到问答页面并传递问题
  uni.navigateTo({
    url: url
  })
}

// 选择推荐问题
const selectSuggestion = (text) => {
  console.log('=== 推荐问题点击开始 ===')
  console.log('选择推荐问题:', text)
  questionText.value = text
  
  // 构建跳转URL，确保参数正确编码，并传递选中的模型信息
  const encodedQuestion = encodeURIComponent(text)
  const selectedModel = modelOptions.value[selectedModelIndex.value]
  const url = `/pages/Questions/questions?question=${encodedQuestion}&model=${encodeURIComponent(selectedModel.label)}&modelIndex=${selectedModelIndex.value}`
  console.log('推荐问题跳转URL:', url)
  console.log('编码后的问题:', encodedQuestion)
  console.log('选中的模型:', selectedModel.label)
  console.log('完整跳转URL:', url)
  
  // 统一使用 navigateTo 跳转
  uni.navigateTo({
    url: url,
    success: () => {
      console.log('推荐问题跳转成功，问题:', text)
      console.log('跳转URL:', url)
      // 跳转成功后清空当前输入框
      questionText.value = ''
      console.log('=== 推荐问题跳转完成 ===')
    },
    fail: (err) => {
      console.error('推荐问题跳转失败:', err)
      console.error('错误详情:', err)
      // 跳转失败时显示提示
      uni.showToast({
        title: '跳转失败，请重试',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
/* 主容器样式 */
.container {
  background: #fff; /* 白色背景 */
  min-height: 100vh; /* 最小高度为视口高度 */
  height: 100vh; /* 确保高度占满视口 */
  width: 100%; /* 确保宽度占满 */
  padding-bottom: 120rpx; /* 底部内边距，为固定页脚留出空间 */
  position: relative; /* 相对定位，为子元素提供定位参考 */
  box-sizing: border-box; /* 盒模型设置 */
  overflow-x: hidden; /* 防止水平滚动 */
}

/* PC端特殊处理 - 确保页面占满整个屏幕 */
@media (min-width: 769px) {
  .container {
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex;
    flex-direction: column;
  }
  
  /* 确保主内容区域能够填充剩余空间 */
  .hero-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 200px); /* 减去头部和底部的高度 */
  }
}

/* 侧边栏样式 */
.sidebar {
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: -300px; /* 初始位置在屏幕左侧外 */
  width: 300px; /* 侧边栏宽度 */
  height: 100vh; /* 高度占满视口 */
  background: #ffffff; /* 白色背景 */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); /* 右侧阴影效果 */
  z-index: 1000; /* 层级，确保在最上层 */
  transition: left 0.3s ease; /* 左侧位置过渡动画 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
}

/* 侧边栏打开状态 */
.sidebar-open {
  left: 0; /* 移动到屏幕内显示 */
}

/* 侧边栏头部样式 */
.sidebar-header {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 两端对齐 */
  padding: 20px; /* 内边距 */
  background: #ffffff; /* 白色背景 */
  border-bottom: 1px solid #f0f0f0; /* 底部边框 */
}

/* 侧边栏Logo容器 */
.sidebar-logo {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 8px; /* 元素间距 */
}

/* 侧边栏Logo图标 */
.sidebar-logo-icon {
  font-size: 24px; /* 图标大小 */
  color: #333; /* 深灰色 */
}

/* 侧边栏Logo文字 */
.sidebar-logo-text {
  font-size: 18px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #333; /* 深灰色 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
}

/* 侧边栏关闭按钮 */
.sidebar-close {
  background: #f8f9fa; /* 浅灰色背景 */
  border: 1px solid #e9ecef; /* 边框 */
  font-size: 16px; /* 字体大小 */
  color: #6c757d; /* 文字颜色 */
  cursor: pointer; /* 鼠标指针 */
  padding: 8px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  transition: all 0.2s ease; /* 过渡动画 */
  width: 32px; /* 宽度 */
  height: 32px; /* 高度 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-weight: 500; /* 字体粗细 */
}

/* 侧边栏关闭按钮悬停效果 */
.sidebar-close:hover {
  background: #e9ecef; /* 悬停时背景色 */
  color: #495057; /* 悬停时文字颜色 */
  transform: scale(1.05); /* 悬停时放大效果 */
}

/* 侧边栏内容区域 */
.sidebar-content {
  flex: 1; /* 占据剩余空间 */
  padding: 20px; /* 内边距 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 12px; /* 元素间距 */
}

/* 新建对话按钮 */
.new-chat-btn {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* 元素间距 */
  padding: 12px 16px; /* 内边距 */
  background: #f8f9fa; /* 浅灰色背景 */
  border: 1px solid #e0e0e0; /* 边框 */
  border-radius: 8px; /* 圆角 */
  cursor: pointer; /* 鼠标指针 */
  transition: all 0.2s ease; /* 过渡动画 */
  font-size: 14px; /* 字体大小 */
  color: #333; /* 文字颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 阴影效果 */
}

/* 新建对话按钮悬停效果 */
.new-chat-btn:hover {
  background: #f0f0f0; /* 悬停时背景色 */
  border-color: #d0d0d0; /* 悬停时边框色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 悬停时阴影效果 */
}

/* 新建对话按钮图标 */
.new-chat-icon {
  font-size: 16px; /* 图标大小 */
  font-weight: bold; /* 字体粗细 */
  color: #667eea; /* 主题色 */
}

/* 新建对话按钮文字 */
.new-chat-text {
  flex: 1; /* 占据剩余空间 */
  font-weight: 500; /* 字体粗细 */
}

/* 新建对话按钮快捷键提示 */
.new-chat-shortcut {
  font-size: 12px; /* 字体大小 */
  color: #666; /* 文字颜色 */
  background: #e8e8e8; /* 背景色 */
  padding: 2px 6px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
}

/* 侧边栏菜单容器 */
.sidebar-menu {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 8px; /* 元素间距 */
}

/* 侧边栏菜单项 */
.menu-item {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* 元素间距 */
  padding: 12px 16px; /* 内边距 */
  border-radius: 8px; /* 圆角 */
  cursor: pointer; /* 鼠标指针 */
  transition: all 0.2s ease; /* 过渡动画 */
  color: #333; /* 文字颜色 */
  background: #ffffff; /* 白色背景 */
  border: 1px solid #f0f0f0; /* 边框 */
}

/* 侧边栏菜单项悬停效果 */
.menu-item:hover {
  background: #f8f9fa; /* 悬停时背景色 */
  border-color: #e0e0e0; /* 悬停时边框色 */
}

/* 侧边栏菜单项图标 */
.menu-icon {
  font-size: 18px; /* 图标大小 */
  color: #667eea; /* 主题色 */
}

/* 侧边栏菜单项文字 */
.menu-text {
  font-size: 14px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
}

/* 历史对话列表 */
.history-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 历史对话项 */
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  margin-bottom: 4px;
}

/* 历史对话项悬停效果 */
.history-item:hover {
  background: #f8f9fa;
  border-color: #e0e0e0;
  transform: translateX(2px);
}

/* 历史对话图标 */
.history-icon {
  font-size: 16px;
  color: #667eea;
  flex-shrink: 0;
}

/* 历史对话内容区域 */
.history-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0; /* 防止文本溢出 */
}

/* 历史对话标题 */
.history-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 历史对话时间 */
.history-time {
  font-size: 12px;
  color: #999;
  line-height: 1.2;
}

/* 历史对话加载状态 */
.history-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: #999;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #f0f0f0;
  border-top: 2px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 14px;
  color: #999;
}

/* 历史对话空状态 */
.history-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #999;
}

.empty-text {
  font-size: 14px;
  color: #999;
}

/* 侧边栏底部区域 */
.sidebar-footer {
  padding: 20px; /* 内边距 */
  border-top: 1px solid #f0f0f0; /* 顶部边框 */
  background: #ffffff; /* 白色背景 */
}

/* 底部个人信息菜单项 */
.sidebar-footer .menu-item {
  margin: 0; /* 移除外边距 */
  border: 1px solid #f0f0f0; /* 边框 */
  background: #ffffff; /* 白色背景 */
}

/* 底部个人信息菜单项悬停效果 */
.sidebar-footer .menu-item:hover {
  background: #f8f9fa; /* 悬停时背景色 */
  border-color: #e0e0e0; /* 悬停时边框色 */
}

/* 遮罩层样式 */
.overlay {
  position: fixed; /* 固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  width: 100vw; /* 宽度占满视口 */
  height: 100vh; /* 高度占满视口 */
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 999; /* 层级 */
  opacity: 0; /* 初始透明度为0 */
  visibility: hidden; /* 初始隐藏 */
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 遮罩层显示状态 */
.overlay-show {
  opacity: 1; /* 完全显示 */
  visibility: visible; /* 可见 */
}

/* 顶部导航栏样式 */
.navbar {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  height: 80rpx; /* 导航栏高度 */
  padding: 0 24rpx; /* 左右内边距 */
  padding-top: calc(40rpx + env(safe-area-inset-top, 0px)); /* 顶部内边距 + 安全区域 */
  background: #fff; /* 白色背景 */
  position: relative; /* 相对定位 */
}

/* 小程序模式顶部样式 */
.mp-header {
  width: 100%;
  background-color: #fff;
  color: #000;
}

.mp-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 4px 16px;
  font-size: 14px;
  background: #fff;
  height: calc(28px + env(safe-area-inset-top, 0px));
}

.mp-nav {
margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px 12px 16px;
  background: #faf8f8;
  border-bottom: 1px solid #333;
}

.mp-menu, .mp-more {
  font-size: 18px;
  color: #101010;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.mp-menu:hover, .mp-more:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mp-title {
  font-size: 16px;
  font-weight: 600;
  color: #101010;
}

/* 导航栏左侧区域 */
.navbar-left {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
}

/* 导航栏Logo */
.logo {
  font-size: 28rpx; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: #333; /* 文字颜色 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
  cursor: pointer; /* 鼠标指针 */
  padding: 8rpx; /* 内边距 */
  border-radius: 8rpx; /* 圆角 */
  transition: all 0.2s ease; /* 过渡动画 */
}

/* 导航栏Logo悬停效果 */
.logo:hover {
  background: #f5f5f5; /* 悬停时背景色 */
  transform: scale(1.05); /* 悬停时放大效果 */
}

/* 导航栏中央区域 */
.navbar-center {
  flex: 1; /* 占据剩余空间 */
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 导航栏标题 */
.navbar-title {
  font-size: 28rpx; /* 字体大小 */
  font-weight: 600; /* 字体粗细 */
  color: rgba(255, 255, 255, 0.9); /* 半透明白色 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
}

/* 导航栏右侧区域 */
.navbar-right {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 16rpx; /* 元素间距 */
  flex: 1; /* 占据剩余空间 */
  justify-content: flex-end; /* 右对齐 */
}

/* 已移除下载APP按钮相关样式 */

/* 登录按钮 */
.login-btn {
  font-size: 22rpx; /* 字体大小 */
  padding: 6rpx 12rpx; /* 内边距 */
  border-radius: 14rpx; /* 圆角 */
  border: none; /* 无边框 */
  background: #667eea; /* 主题色背景 */
  color: #fff; /* 白色文字 */
  transition: all 0.2s ease; /* 过渡动画 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
}

/* 登录按钮激活状态 */
.login-btn:active {
  background: #5a6fd8; /* 激活时背景色 */
}

/* 主标题区域样式 */
.hero-section {
  padding: calc(140rpx + env(safe-area-inset-top, 0px)) 30rpx 40rpx 30rpx; /* 上下左右内边距 + 安全区域 */
}

/* 无导航栏时的主标题区域样式 */
.hero-section-no-navbar {
  padding: calc(320rpx + env(safe-area-inset-top, 0px)) 30rpx 40rpx 30rpx; /* 上下左右内边距 + 安全区域 */
}

/* 主标题容器 */
.main-title {
  text-align: center; /* 居中对齐 */
  margin-bottom: 60rpx; /* 底部外边距 */
}

/* 主标题文字 */
.title-text {
  display: block; /* 块级显示 */
  font-size: 64rpx; /* 字体大小 */
  font-weight: 700; /* 字体粗细 */
  color: #333; /* 文字颜色 */
  margin-bottom: 16rpx; /* 底部外边距 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
}

/* 主标题副标题 */
.title-subtitle {
  display: block; /* 块级显示 */
  font-size: 26rpx; /* 字体大小 */
  color: #666; /* 文字颜色 */
  font-weight: 400; /* 字体粗细 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
}

/* 输入区域样式 */
.input-area {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  padding: 30rpx 0; /* 上下内边距 */
}

/* 问题输入框 */
.question-input {
  width: 100%; /* 移动端占满 */
  max-width: 600rpx; /* 默认最大宽度 */
  min-height: 120rpx; /* 最小高度 */
  height: 4.75rem; /* 固定高度 */
  border: none; /* 无边框 */
  border-radius: 16rpx; /* 圆角 */
  padding: 20rpx; /* 内边距 */
  font-size: 28rpx; /* 字体大小 */
  margin-bottom: 24rpx; /* 底部外边距 */
  background: #fff; /* 白色背景 */
  transition: all 0.3s ease; /* 过渡动画 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 阴影效果 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
  text-align: left; /* 左对齐 */
}

/* 问题输入框聚焦状态 */
.question-input:focus {
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); /* 聚焦时阴影效果 */
}

/* 输入框操作按钮区域 */
.input-actions {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  width: 100%; /* 默认占满 */
  max-width: 600rpx; /* 默认最大宽度 */
}

/* 左侧操作按钮组 */
.action-left {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12rpx; /* 元素间距 */
}

/* 单选按钮样式 */
.radio-btn {
  width: 32rpx; /* 宽度 */
  height: 32rpx; /* 高度 */
  border: 2rpx solid #ddd; /* 边框 */
  border-radius: 50%; /* 圆形 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 单选按钮激活状态 */
.radio-btn.active {
  border-color: #667eea; /* 激活时边框色 */
  background: #667eea; /* 激活时背景色 */
}

/* 单选按钮内部圆点 */
.radio-inner {
  width: 16rpx; /* 宽度 */
  height: 16rpx; /* 高度 */
  border-radius: 50%; /* 圆形 */
  background: #fff; /* 白色背景 */
  opacity: 0; /* 初始透明 */
  transition: opacity 0.3s ease; /* 透明度过渡动画 */
}

/* 单选按钮激活时内部圆点显示 */
.radio-btn.active .radio-inner {
  opacity: 1; /* 激活时完全显示 */
}

/* 深度研究按钮 */
.deep-btn {
  font-size: 26rpx; /* 字体大小 */
  padding: 8rpx 16rpx; /* 内边距 */
  border: none; /* 无边框 */
  border-radius: 12rpx; /* 圆角 */
  background: rgba(102, 126, 234, 0.1); /* 半透明主题色背景 */
  color: #667eea; /* 主题色文字 */
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 深度研究按钮激活状态 */
.deep-btn:active {
  background: rgba(102, 126, 234, 0.2); /* 激活时背景色 */
}

/* 右侧操作按钮组 */
.action-right {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12rpx; /* 元素间距 */
}

/* 模型选择器 */
.model-selector {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 8rpx; /* 元素间距 */
  font-size: 26rpx; /* 字体大小 */
  color: #666; /* 文字颜色 */
  padding: 8rpx 16rpx; /* 内边距 */
  background: rgba(0, 0, 0, 0.05); /* 半透明背景 */
  border-radius: 12rpx; /* 圆角 */
  margin-right: 20rpx; /* 右侧外边距 */
}

/* 模型选择器下拉框 */
.model-picker {
  min-width: 120rpx; /* 最小宽度 */
}

/* 选择器文字样式 */
.picker-text {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 8rpx; /* 元素间距 */
  font-size: 26rpx; /* 字体大小 */
  color: #666; /* 文字颜色 */
  padding: 8rpx 16rpx; /* 内边距 */
  background: rgba(0, 0, 0, 0.05); /* 半透明背景 */
  border-radius: 12rpx; /* 圆角 */
}

/* 选择器箭头图标 */
.picker-arrow {
  font-size: 20rpx; /* 图标大小 */
  color: #999; /* 图标颜色 */
}

/* 麦克风按钮和发送按钮通用样式 */
.mic-btn, .send-btn {
  width: 48rpx; /* 宽度 */
  height: 48rpx; /* 高度 */
  border: none; /* 无边框 */
  border-radius: 50%; /* 圆形 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 24rpx; /* 字体大小 */
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 麦克风按钮 */
.mic-btn {
  background: rgba(0, 0, 0, 0.05); /* 半透明背景 */
  color: #666; /* 文字颜色 */
}

/* 发送按钮 */
.send-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
  color: #fff; /* 白色文字 */
  box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.3); /* 阴影效果 */
}

/* 发送按钮激活状态 */
.send-btn:active {
  transform: scale(0.95); /* 激活时缩小效果 */
}

/* 推荐问题区域样式 */
.suggestions {
  padding: 40rpx 30rpx 0 30rpx; /* 上右下左内边距 */
}

/* 小程序模式下的推荐问题区域样式 */
.suggestions-mp {
  padding: 20rpx 30rpx 40rpx 30rpx; /* 上右下左内边距 */
}

/* 小程序模式下的推荐问题区域样式 */
.suggestions-mp {
  padding: 20rpx 30rpx 40rpx 30rpx; /* 上右下左内边距 */
}

/* 小程序模式下的输入区域样式 */
.input-area-mp {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  padding: 40rpx 30rpx 20rpx 30rpx; /* 上右下左内边距 */
}

/* 小程序模式下的底部输入区域样式 */
.input-bottom-mp {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 底部对齐 */
  left: 0; /* 左侧对齐 */
  right: 0; /* 右侧对齐 */
  background: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
  backdrop-filter: blur(10px); /* 背景模糊效果 */
  border-top: 1px solid #f0f0f0; /* 顶部边框 */
  z-index: 100; /* 层级 */
  padding: 20rpx 30rpx 40rpx 30rpx; /* 上右下左内边距 */
}

/* 小程序模式下的底部文本框样式 */
.question-input-bottom {
  width: 100%; /* 宽度占满父容器 */
  min-height: 80rpx; /* 最小高度 */
  height: 4.75rem; /* 固定高度 */
  border: none; /* 无边框 */
  border-radius: 16rpx; /* 圆角 */
  padding: 16rpx 20rpx; /* 内边距 */
  font-size: 28rpx; /* 字体大小 */
  margin-bottom: 20rpx; /* 底部外边距 */
  background: #fff; /* 白色背景 */
  transition: all 0.3s ease; /* 过渡动画 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 阴影效果 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
  text-align: left; /* 左对齐 */
  resize: none; /* 禁止调整大小 */
}

/* 小程序模式下的底部文本框聚焦状态 */
.question-input-bottom:focus {
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); /* 聚焦时阴影效果 */
}

/* 小程序模式下的底部操作按钮区域样式 */
.input-actions-bottom {
  display: flex; /* 弹性布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  width: 100%; /* 宽度占满父容器 */
  gap: 8px;
}

/* 小程序模式左右操作区域样式 */
.input-actions-bottom .action-left,
.input-actions-bottom .action-right {
  gap: 6px;
}

/* 小程序模式深度研究按钮样式 */
.input-actions-bottom .deep-btn {
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 10rpx;
}

/* 小程序模式按钮样式 */
.input-actions-bottom .settings-btn,
.input-actions-bottom .send-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
}

/* 小程序模式模型选择器样式 */
.input-actions-bottom .model-selector {
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 10rpx;
  margin-right: 16rpx;
}

/* 小程序模式分隔符样式 */
.input-actions-bottom .separator {
  height: 20px;
  margin: 0 4px;
}

/* 推荐问题标题 */
.suggestion-title {
  font-size: 28rpx; /* 字体大小 */
  color: #333; /* 文字颜色 */
  margin-bottom: 24rpx; /* 底部外边距 */
  font-weight: 500; /* 字体粗细 */
  text-align: center; /* 居中对齐 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
}

/* 推荐问题列表容器 */
.suggestion-list {
  display: grid; /* 栅格布局 */
  grid-template-columns: 1fr; /* 移动端单列 */
  gap: 12rpx; /* 元素间距 */
}

/* 推荐问题项样式 */
.suggestion-item {
  background: #fff; /* 白色背景 */
  border-radius: 12rpx; /* 圆角 */
  padding: 20rpx; /* 内边距 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中 */
  gap: 16rpx; /* 元素间距 */
  border: 1rpx solid #f0f0f0; /* 边框 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 阴影效果 */
  transition: all 0.3s ease; /* 过渡动画 */
}

/* 断点：平板 */
@media (min-width: 481px) {
  .question-input { max-width: 720rpx; }
  .input-actions { max-width: 720rpx; }
  .suggestion-list { grid-template-columns: repeat(2, 1fr); gap: 16rpx; }
}

/* 断点：桌面中等 */
@media (min-width: 769px) {
  .question-input { max-width: 820rpx; }
  .input-actions { max-width: 820rpx; }
  .suggestion-list { grid-template-columns: repeat(3, 1fr); gap: 20rpx; }
}

/* 断点：桌面大屏 */
@media (min-width: 1025px) {
  .question-input { max-width: 960rpx; }
  .input-actions { max-width: 960rpx; }
  .suggestion-list { grid-template-columns: repeat(4, 1fr); gap: 24rpx; }
}

/* 推荐问题项激活状态 */
.suggestion-item:active {
  transform: scale(0.98); /* 激活时缩小效果 */
  background: #f8f9fa; /* 激活时背景色 */
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); /* 激活时阴影效果 */
}

/* 推荐问题项图标 */
.suggestion-icon {
  font-size: 32rpx; /* 图标大小 */
  flex-shrink: 0; /* 禁止收缩 */
}

/* 推荐问题项文字 */
.suggestion-text {
  font-size: 28rpx; /* 字体大小 */
  color: #333; /* 文字颜色 */
  line-height: 1.4; /* 行高 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
}

/* 底部备案信息样式 */
.footer {
  /* position: absolute; 固定定位 */
  /* bottom: 0; 底部对齐 */
  /* left: 0; 左侧对齐 */
  /* right: 0; 右侧对齐 */
  margin-top: 3.875rem;
  background: #fff; /* 白色背景 */
  padding: 20rpx 30rpx; /* 内边距 */
  text-align: center; /* 居中对齐 */
  border-top: 1px solid #f0f0f0; /* 顶部边框 */
  z-index: 50; /* 层级 */
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1); /* 顶部阴影 */
}

/* 底部备案信息文字 */
.footer-text {
  color: #999; /* 文字颜色 */
  font-size: 22rpx; /* 字体大小 */
  line-height: 1.8; /* 行高 */
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; /* 字体族 */
}

/* 跳转到问答页按钮样式 */
.go-to-questions-btn {
  width: 48rpx; /* 宽度 */
  height: 48rpx; /* 高度 */
  border: none; /* 无边框 */
  border-radius: 50%; /* 圆形 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 24rpx; /* 字体大小 */
  background: #667eea; /* 蓝色背景 */
  color: #fff; /* 白色文字 */
  transition: all 0.3s ease; /* 过渡动画 */
  margin-left: 8rpx; /* 左侧外边距 */
}

/* 跳转到问答页按钮激活状态 */
.go-to-questions-btn:active {
  background: #5a6fd8; /* 激活时深蓝色背景 */
  transform: scale(0.95); /* 激活时缩小效果 */
}

/* 深度思考切换按钮样式 */
.deep-thinking-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rpx 16rpx;
  border: 2rpx solid #667eea;
  border-radius: 20rpx;
  background: #fff;
  color: #667eea;
  font-size: 24rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 120rpx;
}

.deep-thinking-toggle.active {
  background: #667eea;
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

.deep-thinking-toggle:active {
  transform: scale(0.95);
}

.toggle-text {
  font-size: 24rpx;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

/* 小程序模式下的跳转到问答页按钮样式 */
.input-actions-bottom .go-to-questions-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  margin-left: 6px;
}

/* 小程序模式下的深度思考切换按钮样式 */
.input-actions-bottom .deep-thinking-toggle {
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  min-width: 100rpx;
}

.input-actions-bottom .toggle-text {
  font-size: 22rpx;
}
</style>


